<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="地图"></nav-bar>
		<!-- #endif -->
		
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-m-t-30 u-chart">
			<view class="u-title u-p-20">
				<u-section title="地图" line-color="#F74963" :right="false"></u-section>
			</view>
			<view class="u-canvas">
				<canvas canvas-id="canvasMap" id="canvasMap" class="charts" @touchstart="touchMap"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaMap = null;
		
	export default {
		components: {
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		onLoad(e) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/map.json',
					data:{},
					dataType: 'json',
					header: {'content-type':'application/x-www-form-urlencoded'},
					success: function(res) {
						console.log(111)
						let cMap={series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						cMap.series=res.data.features;
						_self.showMap("canvasMap",cMap);
					},
					fail: (e) => {
						this.$u.toast("网络错误，小程序端请检查合法域名");
					},
				});
			},
			showMap(canvasId,chartData){
				canvaMap=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'map',
					fontSize:11,
					padding:[0,0,0,0],
					legend:{
						show:false
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					dataLabel:true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						map: {
							border:true,
							borderWidth:1,
							borderColor:'#666666',
							fillOpacity:0.6
						}
					}
				});
			},
			touchMap(e){
				canvaMap.showToolTip(e, {
					format: function (item) {
						return item.properties.name 
					}
				});
			}
			
		},
		onPageScroll(e) {
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style>
	page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
	.u-chart{background-color: #fff;display:flex; flex-direction:column !important;}
	.u-title{width: 750rpx;}
	.u-canvas{width: 750upx;height: 500upx;position: relative;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
	.charts3 {position: absolute;width: 250upx;height: 250upx;}
</style>
